<template>
  <div class="edit-dialog">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/product' }">
        产品介绍
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <a href="/">{{ title }}</a>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="dialog-content">
      <el-form
        :model="ruleForm"
        :disabled="type == 3"
        :rules="rules"
        label-width="auto"
        label-position="top"
        ref="formRef"
      >
        <el-row :gutter="100">
          <el-col :span="12">
            <h3 style="font-weight: bold; line-height: 50px">
              <i class="info"></i>基本信息
            </h3>

            <el-form-item label="标题" prop="title">
              <el-input
                v-model="ruleForm.title"
                type="text"
                style="width: 100%"
                maxlength="50"
                placeholder="请输入标题"
                aria-required="true"
                show-word-limit
                clearable
              />
            </el-form-item>
            <el-form-item label="作者" prop="author">
              <el-input
                v-model="ruleForm.author"
                type="text"
                style="width: 100%"
                maxlength="50"
                placeholder="请输入作者名"
                aria-required="true"
                clearable
              />
            </el-form-item>
            <el-form-item label="关键词" prop="keyword">
              <el-input
                v-model="ruleForm.keyword"
                type="text"
                style="width: 100%"
                maxlength="50"
                placeholder="请输入关键词，多个逗号分隔"
                aria-required="true"
                clearable
              />
            </el-form-item>
            <el-form-item label="简介" prop="description">
              <el-input
                v-model="ruleForm.description"
                type="textarea"
                style="width: 100%"
                maxlength="200"
                placeholder="请输入简介"
                rows="5"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <h3 style="font-weight: bold; line-height: 50px">
              <i class="info"></i>其他信息
            </h3>
            <el-form-item label="语言" prop="language">
              <el-radio-group v-model="ruleForm.language">
                <el-radio-button label="中文" value="CN" />
                <el-radio-button label="英文" value="EN" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="设备类型" prop="deviceType">
              <el-radio-group v-model="ruleForm.deviceType">
                <el-radio-button label="IEQ" value="IEQ" />
                <el-radio-button label="PMS" value="PMS" />
                <el-radio-button label="OPT" value="OPT" />
                <el-radio-button label="AI/ROBOT" value="ROBOT" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="发布状态" prop="state">
              <el-radio-group v-model="ruleForm.state">
                <el-radio-button label="草稿" value="DRAFT" />
                <el-radio-button label="发布" value="PUBLISHED" />
                <el-radio-button label="下线" value="OFFLINE" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否首页推荐" prop="recommend">
              <el-radio-group v-model="ruleForm.recommend">
                <el-radio-button label="是" :value="1" />
                <el-radio-button label="否" :value="0" />
              </el-radio-group>
            </el-form-item>
            <!--<el-form-item label="发布时间" prop="releaseTime">
              <el-date-picker
                      v-model="ruleForm.releaseTime"
                      type="datetime"
                      placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>-->
          </el-col>
        </el-row>
        <el-form-item label="内容" prop="content">
          <Editor
            v-if="type != DialogType.detail"
            :modelValue="ruleForm.content"
            @updateValue="updateValue"
          />
          <div
            class="editor-html"
            v-if="type === DialogType.detail"
            v-html="ruleForm.content"
          ></div>
        </el-form-item>
        <el-form-item label="图片" prop="thumbnailUrl">
          <UploadImg
            ref="uploadImgRef"
            :url="ruleForm.thumbnailUrl"
            @addImgKey="addImgKey"
            @delImgKey="delImgKey"
            :type="type"
            tips="建议上传图片规格290px*290px"
          />
        </el-form-item>
        <el-form-item label="产品说明书" prop="manualList">
          <UploadFile
            ref="uploadFileRef"
            :fileList="manualList"
            @addFile="addFile"
            @updateFileList="updateFileList"
            :type="type"
            style="min-width: 230px; text-align: left"
          />
        </el-form-item>
      </el-form>
    </div>
    <span class="dialog-footer">
      <el-button type="primary" v-if="type != DialogType.detail" @click="submit"
        >确定</el-button
      >
      <el-button plain @click="handleClose">取消</el-button>
    </span>
  </div>
</template>
<script>
import { reactive, onMounted, toRefs, computed, watch, nextTick } from "vue";
import UploadImg from "@/components/UploadImg.vue";
import UploadFile from "@/components/UploadFile.vue";
import { addApi, updateApi, getApi } from "@/api/product";
import { DialogType } from "@/utils/types";
import { getImg } from "@/api/common";
import Editor from "@/components/Editor.vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
export default {
  name: "edit",
  components: { UploadImg, Editor, UploadFile },
  props: {
    formData: Object,
    type: Number,
  },
  setup(props, context) {
    const router = useRouter();
    const route = useRoute();
    let state = reactive({
      userList: [],
      selectUsersId: [],
      title: "",
      formRef: null,
      previewList: [],
      rules: {},
      showVideo: false,
      ruleForm: {},
      uploadImgRef: null,
      fileList: [],
      downloadFileList: [],
      id: "",
      type: DialogType.add,
      rules: {
        language: [{ required: true, message: "此项为必填项" }],
        title: [{ required: true, message: "此项为必填项" }],
        author: [{ required: true, message: "此项为必填项" }],
        keyword: [{ required: true, message: "此项为必填项" }],
        description: [{ required: true, message: "此项为必填项" }],
        state: [{ required: true, message: "此项为必选项" }],
        type: [{ required: true, message: "此项为必选项" }],
        recommend: [{ required: true, message: "此项为必选项" }],
      },
    });
    onMounted(() => {
      state.id = route.query.id || "";
      state.type = route.query.type || DialogType.add;
      if (state.type == DialogType.edit) {
        getDetail();
        state.title = "修改";
      } else if (state.type == DialogType.detail) {
        getDetail();
        state.title = "查看";
      } else {
        //新增
        state.title = "新增";
        state.ruleForm = {
          language: "CN",
          deviceType: "IEQ",
          state: "DRAFT",
          recommend: 1,
        };
        state.fileList = [];
      }
    });
    const manualList = computed(() => {
      return (
        state.ruleForm.manualList?.map((e) => {
          return {
            name: e.title,
            url: e.fileKey,
          };
        }) || []
      );
    });
    const getDetail = () => {
      getApi(state.id).then(({ value }) => {
        state.ruleForm = JSON.parse(JSON.stringify(value));
      });
    };
    const addFile = (fileInfo) => {
      if (state.ruleForm.manualList && state.ruleForm.manualList.length > 0) {
        state.ruleForm.manualList.push({
          fileKey: fileInfo.url,
          title: fileInfo.name,
        });
      } else {
        state.ruleForm.manualList = [
          {
            fileKey: fileInfo.url,
            title: fileInfo.name,
          },
        ];
      }
    };
    const updateFileList = (fileList) => {
      console.log(fileList, 'fileList');
      
      if (fileList.length > 0) {
        state.ruleForm.manualList = fileList.map((e) => {
          return {
            fileKey: e.url,
            title: e.name,
          };
        });
        console.log(state.ruleForm.manualList, "---");
      } else {
        state.ruleForm.manualList = [];
      }
    };
    const addImgKey = (key) => {
      state.ruleForm.thumbnailUrl = key;
    };
    const delImgKey = (key) => {
      state.ruleForm.thumbnailUrl = null;
    };
    const submit = () => {
      nextTick(() => {
        state.formRef.validate((valid, fields) => {
          if (!state.formRef) return;
          if (valid) {
            if (state.type == DialogType.add) {
              //创建
              addApi(state.ruleForm).then((res) => {
                router.back();
              });
            }
            if (state.type == DialogType.edit) {
              //修改
              updateApi(state.ruleForm).then((res) => {
                router.back();
              });
            }
          } else {
            ElMessage.error("请完善信息！");
            console.log("请完善信息！");
          }
        });
      });
    };
    const handleClose = () => {
      router.back();
    };
    const updateValue = (val) => {
      state.ruleForm.content = val;
      console.log("updatev");
    };
    return {
      ...toRefs(state),
      submit,
      handleClose,
      DialogType,
      addImgKey,
      updateValue,
      delImgKey,
      manualList,
      updateFileList,
      addFile,
    };
  },
};
</script>
<style lang="scss" scoped>
.edit-dialog {
  overflow-y: auto;
}
</style>
